import React, { InputHTMLAttributes, ReactNode, useState } from 'react';
import './Input.css';

export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
  label?: ReactNode;
  placeholder?: string;
  error?: string;
  success?: boolean;
  prefix?: ReactNode;
  suffix?: ReactNode;
  isRequired?: boolean;
}

const Input: React.FC<InputProps> = ({ 
  label, 
  placeholder, 
  error, 
  success, 
  prefix, 
  suffix, 
  isRequired = false, 
  ...props 
}) => {
  const [focused, setFocused] = useState(false);

  // 构建输入框类名
  const baseClasses = 'w-full px-4 py-3 rounded-lg font-medium transition-all duration-200 ease-in-out focus:outline-none';
  const stateClasses = focused
    ? 'border-2 border-blue-400 shadow-sm' 
    : error
      ? 'border-2 border-red-500' 
      : success
        ? 'border-2 border-green-500' 
        : 'border border-gray-200 hover:border-gray-300';

  const className = `${baseClasses} ${stateClasses}`;

  return (
    <div className="input-container mb-4">
      {label && (
        <label className="block mb-2 text-sm font-medium text-gray-700">
          {label}
          {isRequired && <span className="text-red-500 ml-1">*</span>}
        </label>
      )}
      <div className="relative">
        {prefix && <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">{prefix}</div>}
        <input
          className={className}
          placeholder={placeholder}
          onFocus={() => setFocused(true)}
          onBlur={() => setFocused(false)}
          {...props}
        />
        {suffix && <div className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500">{suffix}</div>}
      </div>
      {error && (
        <p className="mt-1 text-sm text-red-500">{error}</p>
      )}
      {success && !error && (
        <p className="mt-1 text-sm text-green-500">输入正确</p>
      )}
    </div>
  );
};

export default Input;